<template>
  <div id="login">
   <!-- <myinput :clearable="true" @input="handleInput" @clear="handleClear" :maxlength="5"></myinput> -->
    <div class="loginbox">
      <div class="cartbox">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user-solid"
              v-model="ruleForm.username"
              class="inp1"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-info"
              v-model="ruleForm.password"
              class="inp2"
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>

        <!-- button盒子 -->
        <div class="btnbox">
          <el-button type="primary" @click="login('ruleForm')">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </div>

        <!-- 头像盒子 -->
        <div class="imgbox">
          <img src="../../public/LAG7Z.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getGo } from "@/utils/api";
import myinput from '@/components/myinput'
export default {
  name: "APP",
  components:{
    myinput
  },
  data() {
    return {
      ruleForm: {
        username: "admin", //用户名
        password:"123456", //密码
      },

      rules: {
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // handleInput(e){
    //    console.log(e);
    // },

    // handleClear(e){
    //    console.log(e);
    // },

    login(formName) {   //登录
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getGo(this.ruleForm).then((res) => {
            // console.log(res);
            if (res.meta.status == 200) {
              // console.log(res.data.token);
              sessionStorage.setItem('token',res.data.token)
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$router.push('/welcome')
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },

    reset(){  //重置
      this.ruleForm = {}
      this.$message('已重置');
    }
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100vh;
  background-color: #800808;
  background-image: url(../../public/15042216352040-lp.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginbox {
    width: 500px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .cartbox {
      width: 430px;
      height: 300px;
      background-color: #000000;
      border-radius: 5px;
      padding: 0px 20px;
      animation: bg-color 20s infinite;
      -webkit-animation: bg-color 20s infinite;


      @-webkit-keyframes bg-color {

0% { background-color: #e74c3c; }

10% { background-color: #e76f3c; }

20% { background-color: #f1c40f; }

30% { background-color: #b1e73c; }

40% { background-color: #1abc9c; }

50% { background-color: #3498db; }

60% { background-color: #0a19ec; }

70% { background-color: #7b0aec; }

80% { background-color: #e223f0; }

90% { background-color: #ea148d; }

100% { background-color: #e61414; }
}

@keyframes bg-color {

  0% { background-color: #e74c3c; }

10% { background-color: #e76f3c; }

20% { background-color: #f1c40f; }

30% { background-color: #b1e73c; }

40% { background-color: #1abc9c; }

50% { background-color: #3498db; }

60% { background-color: #0a19ec; }

70% { background-color: #7b0aec; }

80% { background-color: #e223f0; }

90% { background-color: #ea148d; }

100% { background-color: #e61414; }

}
      .demo-ruleForm {
        margin-top: 100px;
      }

      .btnbox {
        float: right;
      }

      .imgbox {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-145%);
        border: 8px solid #fff100;
        box-shadow: 0px 0px 20px 0px #fff100;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
